<template>
	<!-- 活动商品 -->
	<view class="activity-wrap u-p-x-20 u-p-b-20  u-m-b-10 seckill-card" v-if="showActivity">
		<!-- 标题栏 -->
		<view class="title-box u-flex u-row-between u-p-y-20  seckill-title">
			<view class="u-flex u-col-center">
				<view class="title-text u-m-r-20 u-ellipsis-1">{{ detail.name }}</view>
				<u-count-down
					class="count-down-demo"
					:timestamp="timestamp"
					separator-color="#ffbbbb "
					bg-color="#ffbbbb "
					ref="uCountDown"
					color="#fff"
					@end="seckillEnd"
					autoplay
				></u-count-down>
			</view>
			<view class="more-box u-flex" @tap="$Router.push('/pages/activity/seckill/list')">
				<text class="more-text u-m-r-10">更多抢购</text>
				<text class="iconfont icon-youjiantou-tianchong more-icon"></text>
			</view>
		</view>
		<!-- 活动商品 -->
		<!-- m -->
		<scroll-view v-if="seckillType === 1" class="scroll-box" scroll-x scroll-anchoring>
			<view class="goods-box u-flex">
				<view class="min-goods u-m-r-14" v-for="mgoods in goodsList" :key="mgoods.id" @tap="jump('/pages/goods/detail', { id: mgoods.id })">
					<view class="img-box"><image class="img" :src="mgoods.image" mode=""></image></view>
					<view class="mgoods-card-bottom u-p-20">
						<view class="goods-title  u-m-b-10 u-ellipsis-1">{{ mgoods.title }}</view>
						<view class="price-box font-OPPOSANS">
							<view class="price u-m-b-10">{{ mgoods.price }}</view>
							<view class="original-price">￥{{ mgoods.original_price }}</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!--b-->
		<view
			v-if="seckillType === 2"
			class="big-goods  u-flex u-p-20 u-col-top u-m-b-16"
			v-for="item in goodsList"
			:key="item.id"
			@tap="jump('/pages/goods/detail', { id: item.id })"
		>
			<image class="goods-img" :src="item.image" mode="aspectFill"></u-image>
			<view class=" card-right u-m-l-20 u-flex-col u-row-between">
				<view class="">
					<view class="goods-title u-ellipsis-1 u-m-t-10 u-m-b-10">
						<view class=" sm cu-tag bg-red radius title-tag u-m-r-10" >秒杀</view>
						{{ item.title }}
					</view>
					<view v-show="item.subtitle" class="subtitle-text u-m-b-10 u-ellipsis-1">{{ item.subtitle }}</view>
				</view>

				<view class="u-flex u-m-y-20">
					<u-line-progress
						style="width:210rpx;"
						height="18"
						:show-percent="false"
						:percent="Number(item.percent)"
						inactive-color=" #e7e7e7"
						active-color="#ffbbbb "
					></u-line-progress>

					<view class="progress-text">已售出{{ item.sales }}件</view>
				</view>

				<view class=" u-flex u-row-between u-col-center">
					<view class="u-flex u-col-bottom">
						<view class="price u-m-r-10">{{ item.price }}</view>
						<view class="origin-price">{{ item.original_price }}</view>
					</view>
					<button class="u-reset-button buy-btn">去抢购</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 自定义之秒杀样式组件
 * @property {Object} detail - 秒杀商品信息
 */
export default {
	components: {},
	data() {
		return {
			timestamp: 0, //倒计时
			goodsList: [],
			res:{
    "code": 1,
    "msg": "活动列表",
    "time": "1688103839",
    "data": {
        "id": 129,
        "title": "秒杀",
        "type": "seckill",
        "richtext_id": 3,
        "richtext_title": "关于我们",
        "starttime": 1665936000,
        "endtime": 1701014400,
        "rules": {
            "activity_auto_close": "10",
            "limit_buy": "4",
            "order_auto_close": "10"
        },
        "goods": {
            "total": 5,
            "per_page": 10,
            "current_page": 1,
            "last_page": 1,
            "data": [
                {
                    "id": 25,
                    "type": "normal",
                    "title": "Dyson\/戴森AM09无叶电风扇冷暖两用暖风取暖器冬季家居小型取暖机",
                    "subtitle": "冷暖两用 即开即热 温暖过冬",
                    "weigh": 0,
                    "category_ids": "86",
                    "image": "http:\/\/file.shopro.top\/uploads\/20210519\/af4e93db61399b53e0f3ac5f0ae139d2.jpeg",
                    "price": "1800.00",
                    "original_price": "3999.00",
                    "is_sku": 0,
                    "likes": 0,
                    "views": 6325,
                    "sales": 13,
                    "show_sales": 0,
                    "dispatch_type": "express",
                    "dispatch_ids": "1",
                    "deletetime": null,
                    "total_sales": 24,
                    "activity": {
                        "id": 129,
                        "title": "秒杀",
                        "type": "seckill",
                        "richtext_id": 3,
                        "richtext_title": "关于我们",
                        "starttime": 1665936000,
                        "endtime": 1701014400,
                        "rules": {
                            "activity_auto_close": "10",
                            "limit_buy": "4",
                            "order_auto_close": "10"
                        },
                        "status_code": "ing"
                    },
                    "activity_type": "seckill",
                    "buyers": [],
                    "sku_price": [
                        {
                            "id": 105,
                            "goods_sku_ids": null,
                            "goods_id": 25,
                            "weigh": 0,
                            "image": null,
                            "stock": 90,
                            "stock_warning": null,
                            "sales": 13,
                            "sn": "",
                            "weight": 0,
                            "price": "1800.00",
                            "goods_sku_text": null,
                            "status": "up",
                            "activity_type": "seckill",
                            "activity_id": 129,
                            "item_goods_sku_price": {
                                "id": 433,
                                "activity_id": 129,
                                "sku_price_id": 105,
                                "goods_id": 25,
                                "stock": 90,
                                "sales": 13,
                                "price": "1800.00",
                                "status": "up"
                            },
                            "goods_sku_id_arr": [
                                ""
                            ]
                        }
                    ],
                    "stock": 90,
                    "activity_discounts": [],
                    "activity_discounts_types": "",
                    "activity_discounts_tags": [],
                    "dispatch_type_arr": [
                        "express"
                    ]
                },
                {
                    "id": 24,
                    "type": "normal",
                    "title": "源氏木语全实木沙发橡木现代简约木沙发客厅家具北欧布艺沙发组合",
                    "subtitle": "FAS级橡木 12cm宽大扶手 橡木铺板 带插座",
                    "weigh": 0,
                    "category_ids": "60",
                    "image": "http:\/\/file.shopro.top\/uploads\/20210519\/1814b306eda14764c00b7b40cbec4f90.jpeg",
                    "price": "2999.00",
                    "original_price": "8200.00",
                    "is_sku": 1,
                    "likes": 0,
                    "views": 11005,
                    "sales": 26,
                    "show_sales": 0,
                    "dispatch_type": "express",
                    "dispatch_ids": "1",
                    "deletetime": null,
                    "total_sales": 35,
                    "activity": {
                        "id": 129,
                        "title": "秒杀",
                        "type": "seckill",
                        "richtext_id": 3,
                        "richtext_title": "关于我们",
                        "starttime": 1665936000,
                        "endtime": 1701014400,
                        "rules": {
                            "activity_auto_close": "10",
                            "limit_buy": "4",
                            "order_auto_close": "10"
                        },
                        "status_code": "ing"
                    },
                    "activity_type": "seckill",
                    "buyers": [],
                    "sku_price": [
                        {
                            "id": 103,
                            "goods_sku_ids": "92",
                            "goods_id": 24,
                            "weigh": 0,
                            "image": "http:\/\/file.shopro.top\/uploads\/20210519\/682f98d4fce303d51789ff1bf9044384.jpeg",
                            "stock": 487,
                            "stock_warning": null,
                            "sales": 13,
                            "sn": "",
                            "weight": 0,
                            "price": "2999.00",
                            "goods_sku_text": "原木色",
                            "status": "up",
                            "activity_type": "seckill",
                            "activity_id": 129,
                            "item_goods_sku_price": {
                                "id": 434,
                                "activity_id": 129,
                                "sku_price_id": 103,
                                "goods_id": 24,
                                "stock": 487,
                                "sales": 13,
                                "price": "2999.00",
                                "status": "up"
                            },
                            "goods_sku_id_arr": [
                                "92"
                            ]
                        },
                        {
                            "id": 104,
                            "goods_sku_ids": "93",
                            "goods_id": 24,
                            "weigh": 0,
                            "image": "http:\/\/file.shopro.top\/uploads\/20210519\/b06c9f3b60b98e17d8e520104ae7ba80.jpeg",
                            "stock": 487,
                            "stock_warning": null,
                            "sales": 13,
                            "sn": "",
                            "weight": 0,
                            "price": "2999.00",
                            "goods_sku_text": "胡桃色",
                            "status": "up",
                            "activity_type": "seckill",
                            "activity_id": 129,
                            "item_goods_sku_price": {
                                "id": 435,
                                "activity_id": 129,
                                "sku_price_id": 104,
                                "goods_id": 24,
                                "stock": 487,
                                "sales": 13,
                                "price": "2999.00",
                                "status": "up"
                            },
                            "goods_sku_id_arr": [
                                "93"
                            ]
                        }
                    ],
                    "stock": 974,
                    "activity_discounts": [],
                    "activity_discounts_types": "",
                    "activity_discounts_tags": [],
                    "dispatch_type_arr": [
                        "express"
                    ]
                },
                {
                    "id": 26,
                    "type": "normal",
                    "title": " Carote麦饭石奶锅不粘锅宝宝辅食锅婴儿煮奶锅雪平锅煮锅泡面锅",
                    "subtitle": "玻璃盖、锅深不溢；锅体质保99天、明火通用",
                    "weigh": 0,
                    "category_ids": "48",
                    "image": "http:\/\/file.shopro.top\/uploads\/20210519\/69ce44b4bc3940c14b375a16e138ee69.png",
                    "price": "99.00",
                    "original_price": "325.00",
                    "is_sku": 0,
                    "likes": 0,
                    "views": 49602,
                    "sales": 33,
                    "show_sales": 0,
                    "dispatch_type": "express",
                    "dispatch_ids": "1",
                    "deletetime": null,
                    "total_sales": 63,
                    "activity": {
                        "id": 129,
                        "title": "秒杀",
                        "type": "seckill",
                        "richtext_id": 3,
                        "richtext_title": "关于我们",
                        "starttime": 1665936000,
                        "endtime": 1701014400,
                        "rules": {
                            "activity_auto_close": "10",
                            "limit_buy": "4",
                            "order_auto_close": "10"
                        },
                        "status_code": "ing"
                    },
                    "activity_type": "seckill",
                    "buyers": [],
                    "sku_price": [
                        {
                            "id": 106,
                            "goods_sku_ids": null,
                            "goods_id": 26,
                            "weigh": 0,
                            "image": null,
                            "stock": 56,
                            "stock_warning": null,
                            "sales": 33,
                            "sn": "",
                            "weight": 0,
                            "price": "99.00",
                            "goods_sku_text": null,
                            "status": "up",
                            "activity_type": "seckill",
                            "activity_id": 129,
                            "item_goods_sku_price": {
                                "id": 436,
                                "activity_id": 129,
                                "sku_price_id": 106,
                                "goods_id": 26,
                                "stock": 56,
                                "sales": 33,
                                "price": "99.00",
                                "status": "up"
                            },
                            "goods_sku_id_arr": [
                                ""
                            ]
                        }
                    ],
                    "stock": 56,
                    "activity_discounts": [],
                    "activity_discounts_types": "",
                    "activity_discounts_tags": [],
                    "dispatch_type_arr": [
                        "express"
                    ]
                },
                {
                    "id": 27,
                    "type": "normal",
                    "title": "布艺被子收纳袋衣服整理袋加厚装棉被衣物的搬家打包袋子大号家用",
                    "subtitle": "健康环保面料 简约美学 给好生活腾出大空间",
                    "weigh": 0,
                    "category_ids": "53",
                    "image": "http:\/\/file.shopro.top\/uploads\/20210519\/7395febcecb1d2088b6f7a37d4c252e9.jpeg",
                    "price": "69.00",
                    "original_price": "77.00",
                    "is_sku": 0,
                    "likes": 0,
                    "views": 115450,
                    "sales": 23,
                    "show_sales": 0,
                    "dispatch_type": "express",
                    "dispatch_ids": "1",
                    "deletetime": null,
                    "total_sales": 33,
                    "activity": {
                        "id": 129,
                        "title": "秒杀",
                        "type": "seckill",
                        "richtext_id": 3,
                        "richtext_title": "关于我们",
                        "starttime": 1665936000,
                        "endtime": 1701014400,
                        "rules": {
                            "activity_auto_close": "10",
                            "limit_buy": "4",
                            "order_auto_close": "10"
                        },
                        "status_code": "ing"
                    },
                    "activity_type": "seckill",
                    "buyers": [],
                    "sku_price": [
                        {
                            "id": 107,
                            "goods_sku_ids": null,
                            "goods_id": 27,
                            "weigh": 0,
                            "image": null,
                            "stock": 27,
                            "stock_warning": null,
                            "sales": 23,
                            "sn": "",
                            "weight": 0,
                            "price": "69.00",
                            "goods_sku_text": null,
                            "status": "up",
                            "activity_type": "seckill",
                            "activity_id": 129,
                            "item_goods_sku_price": {
                                "id": 437,
                                "activity_id": 129,
                                "sku_price_id": 107,
                                "goods_id": 27,
                                "stock": 27,
                                "sales": 23,
                                "price": "69.00",
                                "status": "up"
                            },
                            "goods_sku_id_arr": [
                                ""
                            ]
                        }
                    ],
                    "stock": 27,
                    "activity_discounts": [],
                    "activity_discounts_types": "",
                    "activity_discounts_tags": [],
                    "dispatch_type_arr": [
                        "express"
                    ]
                },
                {
                    "id": 28,
                    "type": "normal",
                    "title": "布朗博士旗舰店新生婴儿玻璃奶瓶防呛奶瓶防胀气宽口径奶瓶",
                    "subtitle": "口碑之选",
                    "weigh": 0,
                    "category_ids": "108",
                    "image": "http:\/\/file.shopro.top\/uploads\/20210519\/356bead1ea234354168954aa55e98d7a.jpeg",
                    "price": "99.00",
                    "original_price": "199.00",
                    "is_sku": 1,
                    "likes": 0,
                    "views": 2565,
                    "sales": 13,
                    "show_sales": 0,
                    "dispatch_type": "express",
                    "dispatch_ids": "1",
                    "deletetime": null,
                    "total_sales": 31,
                    "activity": {
                        "id": 129,
                        "title": "秒杀",
                        "type": "seckill",
                        "richtext_id": 3,
                        "richtext_title": "关于我们",
                        "starttime": 1665936000,
                        "endtime": 1701014400,
                        "rules": {
                            "activity_auto_close": "10",
                            "limit_buy": "4",
                            "order_auto_close": "10"
                        },
                        "status_code": "ing"
                    },
                    "activity_type": "seckill",
                    "buyers": [],
                    "sku_price": [
                        {
                            "id": 108,
                            "goods_sku_ids": "95",
                            "goods_id": 28,
                            "weigh": 0,
                            "image": "http:\/\/file.shopro.top\/uploads\/20210519\/356bead1ea234354168954aa55e98d7a.jpeg",
                            "stock": 495,
                            "stock_warning": null,
                            "sales": 5,
                            "sn": "",
                            "weight": 0,
                            "price": "99.00",
                            "goods_sku_text": "150ml",
                            "status": "up",
                            "activity_type": "seckill",
                            "activity_id": 129,
                            "item_goods_sku_price": {
                                "id": 438,
                                "activity_id": 129,
                                "sku_price_id": 108,
                                "goods_id": 28,
                                "stock": 495,
                                "sales": 5,
                                "price": "99.00",
                                "status": "up"
                            },
                            "goods_sku_id_arr": [
                                "95"
                            ]
                        },
                        {
                            "id": 109,
                            "goods_sku_ids": "96",
                            "goods_id": 28,
                            "weigh": 0,
                            "image": "http:\/\/file.shopro.top\/uploads\/20210519\/356bead1ea234354168954aa55e98d7a.jpeg",
                            "stock": 492,
                            "stock_warning": null,
                            "sales": 8,
                            "sn": "",
                            "weight": 0,
                            "price": "99.00",
                            "goods_sku_text": "270ml",
                            "status": "up",
                            "activity_type": "seckill",
                            "activity_id": 129,
                            "item_goods_sku_price": {
                                "id": 439,
                                "activity_id": 129,
                                "sku_price_id": 109,
                                "goods_id": 28,
                                "stock": 492,
                                "sales": 8,
                                "price": "99.00",
                                "status": "up"
                            },
                            "goods_sku_id_arr": [
                                "96"
                            ]
                        }
                    ],
                    "stock": 987,
                    "activity_discounts": [],
                    "activity_discounts_types": "",
                    "activity_discounts_tags": [],
                    "dispatch_type_arr": [
                        "express"
                    ]
                }
            ]
        },
        "status_code": "ing"
    }
},
			showActivity: true, //是否显示活动。
			seckillType: this.detail.style
		};
	},
	props: {
		detail: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	watch: {},
	computed: {},
	created() {
		this.getActivityGoodsList();
	},
	methods: {
		// 路由跳转
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},

		// 秒杀计时结束
		seckillEnd() {
			this.showActivity = false;
		},

		// 获取秒杀商品
		getActivityGoodsList() {
			let that = this;
			// that.$http('goods.activity', {
			// 	activity_id: that.detail.id
			// }).then(res => {
				// if (res.code === 1) {
					that.goodsList = that.res.data.goods.data;
					that.goodsList.map(item => {
						item.percent = item.stock + item.sales > 0 ? ((item.sales / (item.sales + item.stock)) * 100).toFixed(2) : 0;
					});
					let nowTime = new Date().getTime();
					let endTime = that.res.data.endtime * 1000;
					that.timestamp = (endTime - nowTime) / 1000;
					that.timestamp > 0 ? that.$refs.uCountDown.start() : (that.showActivity = false);
				// } else {
				// 	that.showActivity = false;
				// 	console.log(`%cerr:秒杀活动已结束`, 'color:green;background:yellow');
				// }
			// });
		}
	}
};
</script>

<style lang="scss" scoped>
.seckill-card {
	background: linear-gradient(#ffebec 20%, #fff 30%, #fff 100%);
}

.seckill-title {
	background: url($IMG_URL+'/imgs/tag/seckill_title_bg.png') no-repeat;
	background-position: center top;
	background-size: 100% auto;
}
.activity-wrap {
	background-color: #fff;
	min-height: 300rpx;
	.title-box {
		.title-text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
		.more-box {
			.more-text {
				font-size: 22rpx;
				font-weight: 500;
				color: #333333;
			}
			.more-icon {
				font-size: 24rpx;
				color: #333333;
			}
		}
	}

	.scroll-box,
	.goods-box {
		height: 380rpx;
		width: 100%;
	}
}

// 小商品卡片
.min-goods {
	width: 220rpx;
	height: 380rpx;
	background: #fff7f7;
	box-shadow: 0px 7rpx 7rpx 0px rgba(255, 80, 94, 0.32);
	border-radius: 10rpx;
	.img-box {
		width: 220rpx;
		height: 220rpx;
		overflow: hidden;
		position: relative;
		border-radius: 10rpx 10rpx 0 0;
		.img {
			width: 220rpx;
			height: 220rpx;
			background-color: #ccc;
		}
	}
	.mgoods-card-bottom {
		height: 160rpx;
		background: url($IMG_URL+'/imgs/tag/seckill_goods_bg.png') no-repeat;
		background-position: bottom center;
		background-size: 100% 100%;
	}
	.goods-title {
		font-size: 26rpx;
		font-weight: 500;
		color: #000000;
		line-height: 26rpx;
	}
	.price-box {
		.price {
			font-size: 30rpx;
			font-weight: 500;
			color: #ff0000;
			&::before {
				content: '￥';
				font-size: 24rpx;
			}
		}
		.original-price {
			font-size: 20rpx;
			font-weight: 500;
			text-decoration: line-through;
			color: #c4c4c4;
		}
	}
}

// 大商品卡片
.big-goods {
	width: 710rpx;
	min-height: 260rpx;
	background: #ffffff;
	box-shadow: 0px 7rpx 8rpx 1rpx rgba(254, 76, 29, 0.05);
	border-radius: 20rpx;
	.goods-img{
		width: 220rpx;
		height: 220rpx;
		border-radius: 6rpx;
	}
	.card-right {
		width: 430rpx;
		height: 100%;
	}
	.goods-title {
		font-size: 26rpx;
		font-weight: 600;
		width: 400rpx;
		color: #000000;
	}
	.subtitle-text {
		font-size: 22rpx;
		width: 400rpx;
		font-weight: 500;
		color: #666666;
	}
	.buy-btn {
		width: 120rpx;
		line-height: 50rpx;
		background: linear-gradient(90deg, #d01325, #ed3c30);
		border-radius: 25rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #ffffff;
	}
	.progress-text {
		color: #c4c4c4;
		font-size: 20rpx;
		margin-left: 25rpx;
	}
	// 价格
	.price {
		color: #ff0000;
		font-weight: 600;
		&::before {
			content: '￥';
			font-size: 20rpx;
		}
	}
	.origin-price {
		color: #c4c4c4;
		font-size: 24rpx;
		text-decoration: line-through;
		&::before {
			content: '￥';
			font-size: 20rpx;
		}
	}
}
</style>
